<template>
  <div class="op-container">
    <k-button v-if="authorityHandle(28)" class="top-btn" value="定时箱子配置" @click.native="timeBoxSettingDialog" />
    <!-- <k-button class="top-btn" value="玩法介绍" @click.native="ruleGuideDialog" /> -->
    <!--表格相关 -->
    <el-table
      ref="dragTable"
      :data="timeBoxList"
      fit
      border
      row-key="id"
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column type="index" label="序号" width="60px" align="center" />
      <el-table-column prop="timingTypeName" min-width="200px" label="定时时间" align="center" />
      <el-table-column min-width="200px" label="饰品图标" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 110px; height: 80px"
            :src="scope.row.goodsIconUrl"
            :preview-src-list="[scope.row.goodsIconUrl]"
            fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" min-width="200px" label="饰品名称" align="center" />
      <el-table-column prop="goodsPrice" min-width="200px" label="饰品价格" align="center" />
      <el-table-column prop="rechargeAmount" min-width="200px" label="消费最小金额" align="center" />
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button v-if="authorityHandle(28)" class="table-btn" value="修改" @click.native="addBoxUpdateDialog(scope.row)" />
            <k-button v-if="authorityHandle(28)" class="table-btn" value="删除" @click.native="deleteBox(scope.row.id)" />
            <k-button class="table-btn" value="参与详情" @click.native="palyerDetail(scope.row.id)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="上架状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.boxStatus"
            :disabled="!authorityHandle(28)"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="上架"
            inactive-text="下架"
            :active-value="1"
            :inactive-value="2"
            @change="boxOnlineState($event,scope)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加箱子 弹窗 -->
    <k-dialog
      :show-hide.sync="timeBoxSetting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class="timeBoxSetting-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="addTimeBoxData"
    >
      <el-form :model="timeBoxSettingInfo" label-width="auto" class="form-modify">
        <el-form-item label="定时时间：">
          <el-select v-model="timeBoxSettingInfo.timingType" placeholder="请选择时间">
            <el-option label="1小时" :value="1" />
            <el-option label="1天" :value="2" />
            <el-option label="1周" :value="3" />
          </el-select>
        </el-form-item>
        <!-- 远程搜索添加一个 element 原始控件一样-->
        <el-form-item label="饰品名称：">
          <el-select
            v-model="timeBoxSettingInfo.goodsId"
            clearable
            filterable
            placeholder="请选择名称"
            @change="selectChange"
          >
            <el-option
              v-for="item in goodsList"
              :key="item.lineId"
              :label="item.lineName"
              :value="item.lineId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="最小参与金额：" prop="name">
          <el-input v-model="timeBoxSettingInfo.rechargeAmount" onkeyup="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入金额" />
        </el-form-item>

      </el-form>
    </k-dialog>
    <!-- 玩法介绍 弹窗 -->
    <k-dialog
      :show-hide.sync="ruleGuide.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="玩法介绍"
      class-name="ruleGuide-dialog"
      :show-foot="false"
      :two-btn="authorityHandle(28)"
      @click="guideSave"
    >
      <div class="dialog-ruleGuide" style="padding:30px">
        <el-form :model="ruleGuideContent" label-width="auto">
          <el-form-item label="内容介绍：" prop="content">
            <quill-editor
              ref="myQuillEditor"
              v-model.trim="ruleGuideContent.content"
              :options="editorOption"
              class="editer"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>
    <!-- 参与人名单 -->
    <k-dialog
      :show-hide.sync="playerDetailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="参与详情"
      class-name="creatRollRoom_dialog"
      :show-foot="false"
      :two-btn="authorityHandle(28)"
    >
      <el-radio-group v-if="authorityHandle(28)" v-model="userId" class="grid_div">
        <div v-for="item in playerdataList" :key="item.lineId" :title="item.lineName" class="item">
          <el-radio :label="item.lineId" @click.native.prevent="clickRadioItem(item.lineId)">{{ item.lineName }}</el-radio>
        </div>
      </el-radio-group>

      <el-radio-group v-else v-model="userId" disabled class="grid_div">
        <div v-for="item in playerdataList" :key="item.lineId" :title="item.lineName" class="item">
          <el-radio :label="item.lineId">{{ item.lineName }}</el-radio>
        </div>
      </el-radio-group>
    </k-dialog>
  </div>

</template>

<script>
import { getTimingPartList, appointWinUser, getGoodsPlatformList, getTimingBoxDescribe, setTimingBoxDescribe, saveTimingData, listTimingData, updateTimingSort, updateTimingStatus, deleteTimingData } from '@/api/rules/listdata'
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      currentBoxId: undefined,
      userId: null,
      sortable: null,
      dialogStatus: 'create',
      textMap: {
        update: '修改箱子',
        create: '添加箱子'
      },
      ruleGuideContent: {
        content: ''
      },
      ruleGuide: {
        showHide: false
      },
      timeBoxSettingInfo: {
        id: undefined,
        timingType: undefined,
        rechargeAmount: '',
        goodsId: undefined,
        boxStatus: undefined,
        boxSort: undefined
      },
      timeBoxSetting: {
        showHide: false
      },
      playerDetailDialog: false,
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image', 'link'] // 上传图片、上传视频
          ]
        }
      },
      timeBoxList: [],
      playerdataList: [],
      goodsList: [{
        lineId: -1,
        lineName: ' ',
        lineCheck: false
      }]
    }
  },
  created() {
    this.getList()
    this.getGoodsPlatformList()
    this.getTimingBoxDescribe()
  },
  methods: {
    clickRadioItem(isChecked) {
      const e = isChecked === this.userId ? (this.userId = null) : (this.userId = isChecked)
      appointWinUser({ boxId: this.currentBoxId, userId: e === null ? 0 : e }).then(res => {
        this.$message.success(res.data.msg)
      })
    },
    palyerDetail(id) {
      this.currentBoxId = id
      this.playerDetailDialog = true
      getTimingPartList({ id }).then(res => {
        this.playerdataList = res.data.userList
        this.userId = res.data.userId
      })
    },
    getList() {
      listTimingData().then(res => {
        this.timeBoxList = res.data
        this.$log(this.timeBoxList)
        this.$nextTick(() => {
          this.setSort()
        })
      })
    },
    setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.timeBoxList.splice(evt.oldIndex, 1)[0]
          this.timeBoxList.splice(evt.newIndex, 0, targetRow)
          this.timeBoxList.map((item, index) => {
            item.boxSort = index
          })
          // 等级箱子列表页更新排序
          updateTimingSort(this.timeBoxList).then(res => {
            this.$log(res)
          })
        }
      })
    },
    addTimeBoxData() {
      saveTimingData(this.timeBoxSettingInfo).then(res => {
        this.$log(res)
        if (res.data.success) {
          this.$message.success('保存成功')
          this.$resetForm(this.timeBoxSettingInfo)
          this.getList()
        } else {
          this.$message.success(res.data.msg)
        }
        this.timeBoxSetting.showHide = false
      })
    },
    selectChange(val) {
    },
    // 请求饰品
    getGoodsPlatformList() {
      getGoodsPlatformList({ 'key': '', 'alreadyIds': '[-1]' }).then(res => {
        this.goodsList = []
        Object.assign(this.goodsList, res.data)
      })
    },
    // 保存玩法管理
    guideSave() {
      const contents = this.ruleGuideContent.content
      setTimingBoxDescribe({ 'data': contents }).then(res => {
        this.ruleGuide.showHide = false
      })
    },
    // 加载玩法管理
    getTimingBoxDescribe() {
      getTimingBoxDescribe().then(res => {
        this.ruleGuideContent.content = res.data
      })
    },
    // 箱子上架
    boxOnlineState(event, scope) {
      const id = scope.row.id
      updateTimingStatus({ 'id': id }).then(res => {
        this.$log(res)
      })
    },
    addBoxUpdateDialog(row) {
      this.dialogStatus = 'update'
      this.timeBoxSetting.showHide = true
      this.timeBoxSettingInfo.id = row.id
      this.timeBoxSettingInfo.timingType = row.timingType
      this.timeBoxSettingInfo.goodsId = row.goodsId
      this.timeBoxSettingInfo.rechargeAmount = row.rechargeAmount
    },
    deleteBox(boxid) {
      this.$confirm('确定要删除该箱子么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTimingData({ 'id': boxid }).then(res => {
          if (res.data.success) {
            this.$message.success('操作成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {

      })
    },
    timeBoxSettingDialog() {
      this.$resetForm(this.timeBoxSettingInfo)
      this.dialogStatus = 'create'
      this.timeBoxSetting.showHide = true
    },
    ruleGuideDialog() {
      this.ruleGuide.showHide = true
    }
  }
}
</script>
<style lang="scss" scoped>
$mainColor:#3b425d;// 主色调
$disabledColor: #909399; //禁用色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
::v-deep .el-radio__input.is-checked .el-radio__inner {
      border-color: $mainColor;
      background: $mainColor;
}
::v-deep  .el-radio__inner:hover {
    border-color: $mainColor;
}
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: $mainColor;
}
.grid_div{
  display: grid;
  grid-template-columns:  repeat(7, 150px);
  overflow: hidden;
  .item{
    height: 50px;
    font-size: 14px;
    line-height:50px;
    text-align: center;
    border: 1px solid #E3E2E7;
    width: 150px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10px;
  }
}
.op-container{
  margin: 20px;
}
.top-btn{
  margin: 10px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
  &:nth-of-type(2){
    margin-left: 10px;
  }
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
    border-color: $mainColor;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.price-input{
  width: 100px;
}
.timeBoxSetting-dialog{
  ::v-deep .el-dialog__body{
    padding: 10px 80px;
  }

 ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}
.upload-btn {
  font-size: 14px;
  color: #ffffff;
}
.editer {
  border-radius: 8px;
  float: left;
  box-sizing: border-box;
  color: #606266;
  ::v-deep .ql-container {
    height: 440px;
    border-radius: 0px 0px 8px 8px;
  }
  ::v-deep .ql-toolbar.ql-snow {
    border-radius: 8px 8px 0px 0px;
  }
}
.table-btn{
  width: 90px;
  height: 35px;
  line-height:35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;
  &:hover{
    background: $mainColor;
    color: #fff;
  }
   &:focus {
     background-color: #e7ecf8;
  }
}

</style>
